<template>
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24">
      <el-table :data="userList" border stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="100"/>
        <el-table-column prop="username" label="用户名" width="180"/>
        <el-table-column prop="email" label="邮箱" width="250"/>
        <el-table-column prop="phone" label="电话" width="180"/>
        <el-table-column label="角色" width="150">
          <template #default="scope">
            <el-tag v-if="scope.row.role == 0" type="success">管理员</el-tag>
            <el-tag v-if="scope.row.role == 1" type="info">普通用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column prop="updateTime" label="更新时间"/>
      </el-table>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-pagination
          v-model:current-page="queryVo.currentPage"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[1, 2, 3, 4]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>

<script>

import {findUserList} from "../../api/user.js";

import {getCurrentInstance, onMounted} from "vue";

export default {
  name: "Userlist"
  , data() {
    return {
      queryVo: {
        currentPage: 1,
        pageSize: 2
      },
      totalCount: 0,
      userList: [
        {
          "id": 1,
          "username": "admin",
          "password": "c695118bc58532e6bfcf8c391c7c8624",
          "email": "admin@happymall.com",
          "phone": "13800138000",
          "question": "问题",
          "answer": "答案",
          "role": 0,
          "createTime": "2016-11-06 08:56:45",
          "updateTime": "2017-04-04 11:27:36",
          "salt": "b5960f308bae462fb524db8f1f534554"
        }
      ]
    }
  },
  methods: {
    // 改变页大小
    handleSizeChange(val){
      console.log(val);
      this.queryVo.pageSize = val;
      this.loadUserData();
    },
    // 改变页码
    handleCurrentChange(val){
      console.log(val);
      this.queryVo.currentPage = val;
      this.loadUserData();
    },
    async loadUserData() {
      const {data: ret} = await findUserList(this.queryVo);
      console.log(ret);
      this.userList = ret['data']['data'];
      this.totalCount = ret['data']['totalCount'];
    }
  },
  setup() {
    const {ctx: ctx} = getCurrentInstance();
    onMounted(() => {
      ctx.loadUserData();
    });
  }
}
</script>

<style scoped>

</style>